﻿<template>
  <div>Home</div>
  <!--  tag属性不生效  tag是vue-router@3 的使用方法  4版本删除了此属性,改用插槽实现-->
  <!--  <router-link to="/home/music" tag="button">music</router-link>-->
  <!--  <router-link to="/home/music">-->
  <!--    <button>music</button>-->
  <!--  </router-link>-->
  <!--  同理 event属性页被删除  改用插槽实现-->
  <router-link to="/home/music" custom v-slot="{ navigate }">
    <button @click="navigate" @keypress.enter="handleKeyPress" role="link">
      music
    </button>
  </router-link>
  <router-link to="/home/video">
    <button>video</button>
  </router-link>
  <!--  <router-view></router-view>-->
  <!--  缓存路由也做了更改,之前是transition包裹router-view ,现在使用作用域插槽实现  Component是解构出来的-->
  <!--  传递一个被transition或者keep-alive包裹的动态组件作为插槽      -->
  <router-view v-slot="{ Component }">
    <transition>
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Home",
});
</script>
<script lang="ts" setup>
const navigate = (): void => {};
const handleKeyPress = (event: KeyboardEvent): void => {
  if (event.key === "Enter") {
    navigate();
  }
};
</script>
<style lang="less" scoped></style>
